<?php get_instance()->view('common/header');?>
<style>
    <!--
    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
        border-top: 1px solid #ddd;
        line-height: 1.42857;
        padding: 8px;
        vertical-align: middle;
    }

    .tool-btn{float:right;margin-left:10px;display: inline-block;margin-top: -3px;}
    .tool-btn i{font-size:12px;}
    td:hover .tool-btn{
        display:block;
    }
    td .tool-btn{
        display:none;
    }
    .portlet.box > .portlet-title > .tools {
        margin-top: 0;
    }
    .delete-model-btn{margin-left: 10px;color: red;}
    .delete-model-btn:hover, .delete-model-btn:focus{color: red;text-decoration: underline;}
    /*.dd3-handle:before{*/
        /*content: '';*/
        /*display: none;*/
    /*}*/
    /*.dd3-handle{*/
        /*padding: 0;*/
        /*background: #fff;*/
    /*}*/
    /*.dd3-handle img{*/
        /*max-height: 100%;max-width: 100%;*/
        /*position: absolute;*/
        /*left: 0;*/
        /*top: 0;*/
    /*}*/
    -->
</style>
<div class="page-container home">
    <?php get_instance()->view('common/sidebar');?>
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                    <h3 class="page-title"><?php echo $title?></h3>
                    <ul class="page-breadcrumb breadcrumb">
                        <li><i class="fa fa-home"></i><a href="javascript:void(0);"><?php echo $title?> </a></li>
                    </ul>
                    <!-- END PAGE TITLE & BREADCRUMB-->
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet box grey">
                        <div class="portlet-title">
                            <div class="caption">发现分类</div>
                            <div class="tools">
                                <?php if(adminAuthority('category-add', 'find')):?>
                                <button type="button" class="btn btn-xs blue add-model-btn"> <i class="fa fa-plus"></i> 新增</button>
                                <?php endif;?>
                            </div>
                        </div>
                        <div class="portlet-body"><div class="dd model" id="model-list"></div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="model-modal" style="top: 20%;" class="modal fade modal_small" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title"></h4>
            </div>
            <form action="<?php echo getUrl('find/category/save');?>" class="form-horizontal" id="model-form" method="post">
                <div class="modal-body">
                    <!-- 头像控件  -->
                    <div class="form-group">
                        <label class="control-label col-md-2">图标 <span class="required">*</span></label>
                        <div class="col-md-9">
                            <img id="icn-img" alt="" src="" style="width: 90px; height: 90px;">
                            <a class="upload-btn" href="javascript:void(0);">上传图标</a>
                            <input type="hidden" name="portrait" id="pic" />
                            <div class="clearfix margin-top-10">
						    <span> <i class="fa fa-exclamation-triangle"></i> </span>
                                图片格式：gif,png,jpg;大小:2MB；尺寸 90*90
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">名称 <span class="required">*</span></label>
                        <div class="col-md-9">
                            <input type="text" name="name" class="form-control required"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">关联特殊分类 <span class="required">*</span></label>
                        <div class="col-md-9">
                            <select  id="attr_cate_id" name="attr_cate_id" class="form-control">
                                <option value="0">请选择</option>
                                <?php foreach ($attrCateId as $v): ?>
                                    <option value="<?php echo $v['id']?>"><?php echo $v['name']?></option>
                                <?php endforeach;?>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="id" value="">
                    <button type="submit" class="btn green field-submit-btn"><i class="fa fa-save"></i> 保存</button>
                    <script type="text/javascript">
                        $(function() {
                            var model = $('#model-modal');
                            var defaultImg = '<?php echo getDefaultImg()?>';

                            $('.add-model-btn').click(function () {
                                model.find('.modal-title').html('发现分类');
                                $("#model-form").attr('action', "<?php echo getUrl('find/category/save');?>");
                                add(model);
                            });

                            $('.edit-model-btn').live('click', function () {
                                var p = $(this).parents('.dd-item');
                                edit(p, model);
                            });

                            $.e_validate.init('#model-form', {
                                modal: model, ignore: '', successCallback: function (data) {
                                    modelList();
                                }
                            });

                            function add(model) {
                                model.find('input').val('');
                                model.find('.has-error').removeClass('has-error').find('.validate_message').remove();
                                model.find('.show_message_error').remove();
                                model.find('#icn-img').attr('src',defaultImg);
                                model.find('select').val('');
                                model.modal();
                            }

                            function edit(p, model) {
                                var id = p.attr('data-id');
                                $("#model-form").attr('action', "<?php echo getUrl('find/category/save');?>");
                                var url = '<?php echo getUrl('find/category/getInfo')?>';

                                l_blockUI();
                                $.post(url,{id:id},function(data){
                                    model.find('.has-error').removeClass('has-error').find('.validate_message').remove();
                                    model.find('.show_message_error').remove();
                                    model.find('.modal-title').html('编辑 - ' + data.data.name);
                                    for (var k in data.data){
                                        if (k == 'icon'){
                                            if (data.data[k] == null){
                                                model.find('#icn-img').attr('src',defaultImg);
                                            }else{
                                                model.find('#icn-img').attr('src',data.data[k]);
                                            }
                                        }else{
                                            model.find('[name="'+k+'"]').val(data.data[k]);
                                        }
                                    }
                                    App.unblockUI();
                                    model.modal();
                                }, 'json');
                            }

                            //头像插件
                            cropitMaster({
                                uploadBtn:$('.upload-btn'),
                                height:'92px',
                                width:'92px',
                                complete:function(btn,data){
                                    $('#icn-img').attr('src', data);
                                    $('#pic').val(data).change();
                                }
                            });
                        });
                    </script>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        /**
         * 分类排序
         */
        $('#model-list').nestable({
            maxDepth : 1
        });

        $('#model-list').on('change', function() {
            var serialize = $('.model').nestable('serialize');
            var load = $('#model-list');
            l_blockUI({target:load});
            $.ajax('<?php echo getUrl('find/category/modelSort');?>', {
                dataType:'json',
                type:'post',
                data:{data:serialize},
                error:function(){
                    show_message({status:0, message:'请求超时'});
                    App.unblockUI();
                },
                timeout:60000,
                success:function(data,textStatus,jqXHR){
                    show_message(data);
                    App.unblockUI(load);
                }
            });
        });

        modelList();
    });

    function modelList(){
        var load = $('#model-list');
        l_blockUI({target:load});
        $.ajax('<?php echo getUrl('find/category/getList');?>', {
            dataType:'json',
            type:'get',
            error:function(){
                show_message({status:0, message:'请求超时'});
                App.unblockUI();
            },
            timeout:60000,
            success:function(data,textStatus,jqXHR){
                var html = addHtml(data);
                load.html(html);
                App.unblockUI(load);
            }
        });
    }


    function addHtml(data) {
        var html = '';
        var edit = '<?php echo adminAuthority('category-edit', 'find')?>'
        var delete2 = '<?php echo adminAuthority('category-delete', 'find')?>'
        var deleteImg = "<?php echo $this->staticUrl;?>img/6.png";
        var editImg = "<?php echo $this->staticUrl;?>img/5.png";
        if(data.length){
            html = '<ol class="dd-list">';
            $.each(data, function(k,v){
                html += '<li class="dd-item dd3-item" data-id="'+v.id+'">';
                html += '<div class="dd-handle dd3-handle">';
//                html += '<img src="'+v.icon+'" class="img-wh">';
                html += '</div>';
                html += '<div class="dd3-content">';
                html += v.name;
                html += '<span class="tool-btn">';
                if(edit){
                    html += '<a class="edit-model-btn" href="javascript:void(0);" title="编辑"><img src="'+editImg+'"/></a>';
                }
                if(delete2){
                    html += '<a class="ajax-request-btn delete-model-btn" href="<?php echo getUrl('find/category/delete')?>?id='+
                        v.id+'" title="删除" alert-message="是否确定删除'+v.name+'?"><img src="'+deleteImg+'"/></a></a></span>';
                }

                html += '</div>';
                html += '</li>';
            });
            html += '</ol>';
        }else{
            html += '<div class="note note-success">';
            html += '<p>未添加过发现分类</p>';
            html += '</div>';
        }
        return html;
    }
    
    function ajaxRequestCallBack() {
        modelList();
    }
</script>
</body>
</html>